<script setup>
import thalilistsview from "@/pages/thali/components/list/index.vue";
import canvashbtwo from "@/pages/thali/components/canvashbtwo.vue";
import { ref } from "vue";
import { gather, productinfo } from "@/services/thali";
import { onReachBottom } from "@dcloudio/uni-app";

//滚动bananer
const indicatorDots = ref(false);
const autoplay = ref(false);
const interval = ref(500);
const duration = ref(500);
//海报参数
//画布组件参数
/**
 * 海报背景图片
 * url--图片地址
 * l---距离画布左边
 * t---距离画布顶部
 * w---图片宽
 * h---图片高
 * */
const bgimg = ref({
  url: "https://lmt-app-cloud.yibaitao.com/20240528/ca0c736d-e1c7-3174-90d4-6d5c02213105.png",
  w: 710,
  h: 710,
  l: 20,
  t: 30,
});

/**
 * 二维码图片
 * url--图片地址
 * l---number---距离画布左边
 * t---number---距离画布顶部
 * w---number---图片宽
 * h---number---图片高
 * */
const codeimg = ref({
  url: "https://lmt-app-cloud.yibaitao.com/20240604/86ed26a6-61e3-4ef3-60dd-95099af50a85.png",
  w: 186,
  h: 186,
  l: 544,
  t: 810,
});
/**
 * logon图片
 * url--string--图片地址
 * l---number---距离画布左边
 * t---number---距离画布顶部
 * w---number---图片宽
 * h---number---图片高
 * */
const logo = ref({
  url: "",
  l: 20,
  t: 20,
  w: 120,
  h: 90,
});
/**
 *海报标题
 * name--string --标题 名称
 * l---number---距离画布左边
 * t---number---距离画布顶部
 * size---number--字体大小
 * color---#cccccc---字体颜色
 * */
const titlename = ref({
  name: "我是标题哦",
  l: 20,
  t: 854,
  size: 34,
  color: "black",
});

/**
 *金额数量
 * name--string --标题 名称
 * l---number---距离画布左边
 * t---number---距离画布顶部
 * size---number--字体大小
 * color---#cccccc---字体颜色
 * */
const money = ref({
  name: "10000",
  l: 60,
  t: 1004,
  size: 54,
  color: "#B63434",
});
/**
 *备用说明
 * name--string --标题 名称
 * l---number---距离画布左边
 * t---number---距离画布顶部
 * size---number--字体大小
 * color---#cccccc---字体颜色
 * */
const logoname = ref({
  name: "",
  l: 20,
  t: 914,
  size: 34,
  color: "black",
});
/**
 *备用说明
 * name--string --标题 名称
 * l---number---距离画布左边
 * t---number---距离画布顶部
 * size---number--字体大小
 * color---#cccccc---字体颜色
 * */
const btneme = ref({
  name: "购买此套餐后可升级VIP",
  l: 20,
  t: 955,
  size: 30,
  color: "#666666",
});

const showshare = ref(false);
const pages = ref({
  page: 1,
  limit: 20,
});
const cloeshbfun = () => {
  showshare.value = false;
};

const selectfun = async (val) => {
  let res = await getproductinfo(val.product_id);
  bgimg.value.url = res.data.image;
  codeimg.value.url = res.data.qrcode;
  titlename.value.name = res.data.store_name;

  showshare.value = true;
};
async function getproductinfo(id) {
  return await productinfo({ product_id: id });
}

// 列表操作模块
//下拉触底
onReachBottom(() => {
  // 触发下拉触底时执行的操作
  gatherfun();
});
const listdata = ref([]);
const status = ref("more");
gatherfun();
async function gatherfun() {
  status.value = "loading";
  let res = await gather(pages.value);
  listdata.value.push(...res.data.list);
  if (res.data.list.length < pages.value.limit) {
    status.value = "no-more";
  } else {
    isdatelist.value = true;
    status.value = "more";
  }
  pages.value.page++;
}
</script>

<template>
  <view class="content">
    <view class="content-swiper">
      <swiper
        class="swiper"
        circular
        :indicator-dots="indicatorDots"
        :autoplay="autoplay"
        :interval="interval"
        :duration="duration"
      >
        <swiper-item>
          <view class="swiper-item">
            <image src="@/pages/thali/static/banner.png" />
          </view>
        </swiper-item>
      </swiper>
    </view>
    <thalilistsview
      v-if="listdata.length > 0"
      @select-Event="selectfun"
      :datalist="listdata"
    ></thalilistsview>
    <uni-load-more color="#c6c5c3" :status="status" />
  </view>

  <canvashbtwo
    v-if="showshare"
    @cloes-Event="cloeshbfun"
    :bgimg="bgimg"
    :codeimg="codeimg"
    :titlename="titlename"
    :logoname="logoname"
    :btneme="btneme"
    :showbt="false"
    :cw="750"
    :ch="1000"
  ></canvashbtwo>
</template>

<style scoped lang="scss">
@import "index.scss";
</style>
